<template>
	<section class="login" id="login"  :style="{height:clientHeight+'px'}">
		<header-bar></header-bar>
		<aside class="main">
			<div class="login_main">
				<div class="top"><img src="../../assets/login_icon1.png"/></div>
				<div class="login_main2">
					<h3>登陆</h3>
					<aside class="login_contain">
						<ul>
							<li>
								<span class="icon icon_user"><img src="../../assets/login_user_icon.png"/></span>
								<input type="text" class="text" v-model.trim="username" placeholder="用户名" maxlength="20"/>
							</li>
							<li>
								<span class="icon icon_password"><img src="../../assets/login_password_icon.png"/></span>
								<input type="password" class="text" v-model.trim="password" placeholder="密码" maxlength="20"/>
							</li>
						</ul>
						<a href="javascript:void(0);" class="btn" @click="send()">登陆</a>
						<!--<router-link to="/myList" class="btn">登陆</router-link>-->
					</aside>
				</div>


			</div>
		</aside>
		<div class="footer">
			<footer-bar></footer-bar>
		</div>

	</section>
</template>

<script>
	import headerBar from "@/layout/header"
	import footerBar from "@/layout/footer"
	export default{
		components:{
			headerBar,
			footerBar
		},
		data(){
			return{
				username:'',
				password:'',
        clientHeight:window.innerWidth<959?window.innerHeight:"auto" ,
        clientWidth:window.innerWidth,
			}
		},
		created(){
			var _this=this;
			document.onkeydown=function(event){
				event=event || window.event;
				if(event.keyCode==13){
					_this.send();
				}
			}
		},
    mounted(){
          const that = this;
      window.onresize = () => {
        return (() => {
          that.clientWidth = window.innerWidth;
          if(that.clientWidth<959){
            that.clientHeight=window.innerHeight;
        }else{
            that.clientHeight="auto";
        }
        })()
    }
    },
		methods:{

			send(){
				//console.log(this.global.url)
				if(this.username==''){
					this.$layer.msg("用户名不能为空");
					return false;
				}
				else if(this.password==''){
					this.$layer.msg("密码不能为空");
					return false;
				}
				this.$http.post(this.global.url+'/api/user/login ',{
						uname:this.username,
						passwd:this.password
					}).then(res=>{
						console.log(res)
						let data=res.data;
						if(data.code==0){
              localStorage.setItem('token',   data.data["token"]);
              localStorage.setItem('refleshToken',data.data["refleshToken"]);
							this.$store.commit('set_token', data.data["token"]);
							this.$store.commit('set_refleshToken', data.data["refleshToken"]);
							if (this.$store.state.token||localStorage.getItem("token")) {
								this.getUserInfor();//获取用户信息

							} else {
								  this.$router.replace('/login');
							}
						}
						else{
              this.$layer.msg("账号或密码不正确");
							//this.$layer.msg(data.msg);
						}
					}).catch(error=>{
						console.log(error)
					})
			},
			getUserInfor(){
				this.$ajax.get(this.global.url+"/api/user/getUserInfo").then(res=>{
					//console.log(res)
					let result=res.data;
					if(result.code==200){
						let data=JSON.stringify(result.data);
						/*sessionStorage.setItem('userInfo',data);*/
            			localStorage.setItem('userInfo',  data);
            			let redirect = decodeURIComponent(this.$route.query.redirect || '/');
            			this.$router.push({ path: redirect });//登录成功后跳转路由
					}
					else{
						this.$router.replace('/login');
					}
				}).catch(error=>{
					console.log(error)
				})
			}
		}
	}
</script>

<style scoped>
	.login{
		width:100%;
		height: 100%;
		position: relative;
		/*min-height:600px;*/
    	overflow-y: auto;
	}

	.main{
		position:absolute;
		top:4rem;
		left:0px;
		right:0px;
		bottom:0px;
		overflow: auto;
		background: url(../../assets/login_bj.jpg) no-repeat center top;
		background-size: cover;
	}
	.login_main{
		width: 80%;
		max-width: 700px;
		position:absolute;
		top:50%;
		left:50%;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		background: #fff;
	}
	.top{
		position: absolute;
		top:-2.8rem;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 5.4rem;
		height:5.4rem;
		line-height: 4.5rem;
		text-align: center;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
		border-radius: 50%;
		background: #fff;
	}
	.top img{
		width: 33%;
		vertical-align: middle;
	}
	.login_main2{
		padding:3.8rem 5rem 4rem;
	}
	.login_main2 h3{
		font-size: 1.3rem;
		color:#333333;
		font-weight: bold;
		line-height: 1.6rem;
		text-align: center;
		margin-bottom: 2.3rem;
	}
	.login_contain li{
		width:100%;
		border:1px solid #e5e5e5;
		height:2.7rem;
		line-height: 2.7rem;
		margin-bottom: 10px;
		padding-left: 2.2rem;
		position:relative;
	}
	.login_contain li .icon{
		display: inline-block;
		width: 1rem;
		height:1rem;
		line-height: 1rem;
		position: absolute;
		top:0.7rem;
		left:1.1rem;
	}
	.login_contain li .icon img{
		max-width: 100%;
		vertical-align: middle;
	}
	.login_contain li .text{
		width: 100%;
	    height: 100%;
	    display: block;
	    border: none;
	    font-size: 14px;
	    padding-left: 5px;
	}
	.login_contain ul{
		padding-bottom: 1.1rem;
	}
	.btn{
		width:100%;
		height: 2.7rem;
		line-height: 2.7rem;
		text-align:center;
		background: #53306c;
		font-size: 1rem;
		color: #fff;
		display: block;
	}
	.footer{
		position: absolute;
		bottom: 0px;
		width: 100%;

	}
	@media only screen and (min-width: 320px) and (max-width: 640px) {
    body,html{
      width:100%;
      height: 100%;
      background: #eaecef;
    }
    /*.login{
      min-height: 700px;
    }*/
		.login_main{
			width:90%;
		}
		.login_main2{
			padding: 3.8rem 1.5rem 4rem;
		}
	}
</style>
